<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>习题</title>
	<!-- 公共的js文件 -->
	<script src="../public/js/flexible.js"></script>
	<link href="../public/images/mlogo.ico" rel="shortcut icon">
	<link rel="stylesheet" href="../public/css/reset.css">
	<link rel="stylesheet" href="../public/css/common.css">
	<link rel="stylesheet" href="../public/css/exercises/exercises.css">
</head>
<body>
	<!-- 绝对定位 -->
	<!-- 顶部（公共的部分） -->
	<header class="head clearfix">
		<!-- logo -->
		<div class="head-logo">
			<a href="index.html" class="logo">
				<img src="../public/images/logo.png" alt="题海">
			</a>
		</div>
		<!-- 搜索栏 -->
		<div class="head-search">
			<form action="">
				<!-- 搜索栏组件 -->
				<div class="search-group">
					<input class="search-input" type="text">
					<button class="search-btn" type="submit"></button>
				</div>
			</form>
		</div>
	</header>
	<!-- 主体，放网页的主要内容 -->
	<div class="content clearfix">
		<!-- 侧边导航栏sidebar -->
		<div class="sidebar">
			<ul class="sidebar-left">
				<li class="li-item">
					<a href="" class="active">前端开发</a>
				</li>
				<li class="li-item">
					<a href="">后端开发</a>
				</li>
				<li class="li-item">
					<a href="">网站建设</a>
				</li>
				<li class="li-item">
					<a href="">文学<br>&语言</a>
				</li>
				<li class="li-item">
					<a href="">数据库</a>
				</li>
				<li class="li-item">
					<a href="">编程开发</a>
				</li>
				<li class="li-item">
					<a href="">教育</a>
				</li>
			</ul>
		</div>
		<!-- 内容区 -->
		<div class="main">
			<!-- 子导航栏 -->
			<div class="course-nav">
				<ul class="clearfix">
					<li class="course-item">
						<a href="">
							<img class="class-img" src="../public/images/class_pictures/css.jpg" alt="" width="36" height="36">
							<span class="class-title">javascript</span>
						</a>
					</li>
					<li class="course-item">
						<a href="">
							<img class="class-img" src="../public/images/class_pictures/js.jpg" alt="" width="36" height="36">
							<span class="class-title">HTML</span>
						</a>
					</li>
					<li class="course-item">
						<a href="">
							<img class="class-img" src="../public/images/class_pictures/html.jpg" alt="" width="36" height="36">
							<span class="class-title">HTML</span>
						</a>
					</li>
					<li class="course-item">
						<a href="">
							<img class="class-img" src="../public/images/class_pictures/html.jpg" alt="" width="36" height="36">
							<span class="class-title">HTML</span>
						</a>
					</li>
					<li class="course-item">
						<a href="">
							<img class="class-img" src="../public/images/class_pictures/html.jpg" alt="" width="36" height="36">
							<span class="class-title">HTML</span>
						</a>
					</li>
				</ul>
			</div>
			<!-- 课程 -->
			<div class="course-list">
				<ul>
					<!-- 单个模块 -->
					<li class="course-module">
						<a class="clearfix" href="">
							<div class="left-img">
								<img src="../public/images/class_pictures/css.jpg" alt="">
							</div>
							<div class="right-c">
								<h3 class="course-title">
									html入门
								</h3>
								<div class="course-info">
									<span class="item">中级</span>
									<span class="item">66人在学</span>
								</div>
							</div>
						</a>
					</li>
					<!-- 单个模块end -->
					<!-- 单个模块 -->
					<li class="course-module">
						<a class="clearfix" href="">
							<div class="left-img">
								<img src="../public/images/class_pictures/css.jpg" alt="">
							</div>
							<div class="right-c">
								<h3 class="course-title">
									html入门
								</h3>
								<div class="course-info">
									<span class="item">中级</span>
									<span class="item">66人在学</span>
								</div>
							</div>
						</a>
					</li>
					<!-- 单个模块end -->
				</ul>
			</div>
		</div>
	</div>
	<!-- 绝对定位 -->
	<!-- 底部导航栏，模拟华为手机按钮（公共的部分） -->
	<footer class="foot">
		<nav class="foot-nav">
			<ul class="clearfix">
				<li class="foot-nav-list">
					<a href="../index.html">
						<i class="icon home"></i>
						<span>首页</span>
					</a>
				</li>
				<li class="foot-nav-list">
					<a href="../note/note.html">
						<i class="icon note"></i>
						<span>笔记</span>
					</a>
				</li>
				<li class="foot-nav-list">
					<a href="../issue/issue.html">
						<i class="icon issue"></i>
						<span>问答</span>
					</a>
				</li>
				<li class="foot-nav-list">
					<a class="active" href="exercises.html">
						<i class="icon exercises2"></i>
						<span>习题</span>
					</a>
				</li>
				<li class="foot-nav-list">
					<a href="../user/user.html">
						<i class="icon myuser"></i>
						<span>我的</span>
					</a>
				</li>
			</ul>
		</nav>
	</footer>
</body>
</html>